<template>
  <el-row :gutter="15">
    <el-col :sm="24" :md="19" class="mb-15">
      <card ref="Card">
        <div slot="header">
          <el-input v-model="searchName" placeholder="输入名称搜索" clearable class="w-200" @keyup.enter.native="getList"/>
          <el-button type="success" class="el-icon-search ml-5" @click="getList">搜索</el-button>
          <el-button class="float-right" type="primary" icon="el-icon-plus" @click="add">新增</el-button>
        </div>
        <el-table
            :data="formData"
            @row-click="getTreeChecked"
            :highlight-current-row="true"
        >
          <el-table-column prop="username" label="网点编号"/>
          <el-table-column prop="name" label="名称"/>
          <el-table-column prop="phone" label="联系方式"/>
          <el-table-column prop="address" label="地址"/>
          <el-table-column prop="manager" label="经理"/>
          <el-table-column prop="deposit" label="押金"/>
          <el-table-column prop="initialFree" label="加盟费"/>
          <el-table-column prop="fund" label="账户资金" v-if="this.$level === 1">
            <template slot-scope="scope">
              <span>{{scope.row.fund | formatObj('price')}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sonWaybill" label="子单数" v-if="this.$level === 1"/>
          <el-table-column prop="name" label="级别">
            <template slot-scope="scope">
              <span v-if="scope.row.isSpecial">特殊</span>
              <span v-else-if="scope.row.roleDtoList[0].level === 1">超管</span>
              <span v-else-if="scope.row.roleDtoList[0].level === 2">总部</span>
              <span v-else-if="scope.row.roleDtoList[0].level === 3">一级网点</span>
              <span v-else>二级网点</span>
            </template>
          </el-table-column>
          <el-table-column prop="isChangePass" label="可修改密码">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isChangePass" @change="changePass(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column prop="enabled" label="启用" v-if="$level===1">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.enabled" @change="changeEnabled(scope.row)"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="150">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" @click.stop="edit(scope.row)"/>
              <delete-button
                  :ref="scope.row.id"
                  :id="scope.row.id"
                  @start="deleteData"/>
            </template>
          </el-table-column>
        </el-table>
        <pagination ref="Pagination" @update="getList"/>
        <add ref="Add" @update="getList"></add>
        <edit ref="Edit" @update="getList"></edit>
      </card>
    </el-col>
    <el-col :sm="24" :md="5">
      <card ref="TreeCard">
        <div slot="header">
          <span>菜单分配</span>
          <submit-button
              ref="Submit"
              icon="el-icon-check"
              class="float-right"
              @submit="update"
              text="保存"/>
        </div>
        <checkbox-tree ref="RoleMenuTree" :ids="menuIds" :tree="tree"/>
      </card>
    </el-col>
  </el-row>
</template>

<script>
  import {pageUserApi, delUserApi, editUserApi, getRoleTreeApi, editRolesMenusApi} from '@/api/site/siteList';
  import {objectEvaluate} from "@/utils/common";
  import CheckboxTree from '@/components/CheckboxTree';
  import Add from './add';
  import Edit from './edit';
  import {getRoleListApi} from "@/api/system/role";

  export default {
    name: "SiteList",
    components: {Add, Edit, CheckboxTree},
    data() {
      return {
        id: null,
        formData: [],
        tree: [],
        menuIds: [],
        myMenuIds: [],
        searchName: ''
      }
    },
    mounted() {
      this.getList();
      this.getMyRole();
    },
    methods: {
      // 获得自己的菜单
      getMyRole() {
        if (this.$level === 1) {
          this.getTree()
          return
        }
        let data = {roleName: this.$user.username}
        getRoleListApi(data)
          .then(result => {
            let response = result.resultParam.roleList;
            response.some(item => {
              if (item.name === this.$user.username) {
                this.myMenuIds = item.menus.map(item => item.id)
              }
            })
            this.getTree()
          })
      },
      getTree() { // 获得树
        this.$refs.TreeCard.start();
        getRoleTreeApi().then(result => {
          this.$refs.TreeCard.stop();
          this.tree = result.resultParam.roleTree;
          if (this.$level !== 1) this.filterAsyncTree(this.tree, this.myMenuIds);
        }).catch(() => {
          this.$refs.TreeCard.stop();
        })
      },
      // 遍历和禁用
      filterAsyncTree(nodes, roleIds) {
        return nodes.filter(node => {
          node.disabled = !roleIds.includes(node.id);
          if (node.children && node.children.length) {
            node.children = this.filterAsyncTree(node.children, roleIds)
          }
          return true
        })
      },
      getTreeChecked(row) { // 点击行
        this.$refs.Submit.cancelBan();
        this.$refs.RoleMenuTree.clear();
        this.menuIds = row.roleDtoList[0].menus.map(item => {
          if (item) return item.id
        });
        this.id = row.roleDtoList[0].id
      },
      update() { // 更新菜单
        let data = {};
        data.roleId = this.id;
        data.menuIds = this.$refs.RoleMenuTree.get();
        this.$refs.Submit.start();
        editRolesMenusApi(data).then(() => {
          this.$refs.Submit.stop();
          this.getList()
        }).catch(() => {
          this.$refs.Submit.stop();
        })
      },
      getList() {
        let pagination = this.$refs.Pagination;
        let param = {
          current: pagination.current,
          size: pagination.size,
          username: this.searchName,
          type: 0
        };
        this.$refs.Card.start();
        pageUserApi(param).then(result => {
          let response = result.resultParam.userList;
          this.formData = response.records;
          pagination.total = response.total;
          this.$refs.RoleMenuTree.clear();
          this.$refs.Submit.ban();
          this.$refs.Card.stop();
        })
      },
      changePass(row) { // 改变是否可修改密码
        let data = {
          id: row.id,
          isChangePass: row.isChangePass,
          rolesId: row.roleDtoList[0].id
        };
        editUserApi(data)
      },
      changeEnabled(row) { // 改变是否启用
        let data = {
          id: row.id,
          enabled: row.enabled,
          rolesId: row.roleDtoList[0].id
        };
        editUserApi(data)
      },
      add() {
        this.$refs.Add.visible = true
      },
      edit(obj) {
        let _this = this.$refs.Edit;
        objectEvaluate(_this.form, obj);
        _this.form.level = obj.roleDtoList[0].level;
        _this.form.rolesId = obj.roleDtoList[0].id;
        _this.visible = true
      },
      deleteData(id) {
        delUserApi({ids: id})
          .then(() => {
            this.getList();
            this.$refs[id].close()
          })
          .catch(() => {
            this.$refs[id].stop();
          })
      }
    }
  }
</script>
